<template>
	<div class="app-table">
		<div class='table-title flexrbc'>
			<div>用户列表</div>
			<el-button size="large" color="#006eff" @click.prevent="editRow(null)">
				添加
			</el-button>
		</div>
		<div class="app-table-body">

			<div class="table-outer">
				<el-table class="table-self" height="690px" :header-row-class-name="customTheader"
					:row-class-name='customTbodyRow' v-loading="loading"
					@selection-change="(val:any) => selectionChange(val)" :data="list" :border="false">
					<el-table-column prop="company" label="公司" />
					<el-table-column prop="user" label="联系人" />
					<el-table-column prop="phone" label="电话" />
					<el-table-column prop="password" label="密码" />
					<el-table-column prop="type" label="类型" />
					<el-table-column prop="status" label="状态" />
					<el-table-column prop="createTime" label="创建时间" width="200" />
					<el-table-column prop="endTime" label="到期时间" width="200" />
					<el-table-column prop="duration" label="使用时长" />
					<el-table-column prop="remark" label="备注" />
					<el-table-column label="操作" width="160" class="flexrac" align="center">
						<template #default="scope">
							<el-button text type="primary" size="small" @click.prevent="editRow(scope.row)">
								编辑
							</el-button>
							<el-button text type="primary" size="small" @click.prevent="deleteRow(scope.row)">
								删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<div class="pagination flexrec">
			<el-pagination v-model:currentPage="currentPage1" :page-size="10" background layout="total,prev,pager,next"
				:total="data.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
		</div>
		<!-- 编辑弹窗 -->
		<userDetail :drawerShow='drawerShow' ref="detail" @cancel='hideDetail' @confirm='editDetail' :id='editId'></userDetail>
	</div>

</template>
<script lang="ts" setup>
	import { computed, ref } from 'vue'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import userDetail from './components/userDetail.vue'
	const data = []
	for (let i = 0; i < 23; i++) {
		data.push({
			user: '张' + i,
			company: '瑞丰宝丽' + i,
			phone: 1 + i,
			account: '上海',
			admin: 'admin',
			password: i,
			type: i % 2 ? '付费购买' : '免费体验',
			status: i % 2 ? '已到期' : '未到期',
			createTime: '2023-01-10 14:10:00',
			endTime: '2025-01-10 14:10:00',
			duration: i + '月',
			remark: i + '备注',
			id:'000'+ (i+1)
		})
	}
	const currentPage1 = ref(1)
	// 收缩展开
	const loading = ref(false)
	const handleSizeChange = (val : number) => {
		console.log(`${val} items per page`)
	}
	const handleCurrentChange = (val : number) => {
		console.log(`current page: ${val}`)
		currentPage1.value = val
	}
	const selectionChange = (val) => {
		// selectObj.value = val
	}

	let list = computed(() => {
		let arr = JSON.parse(JSON.stringify(data))
		return arr.splice((currentPage1.value - 1) * 10, 10)
	})
	const deleteRow = (row) => {
		ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
			draggable: true,
		})
			.then(() => {
				list.value = list.value.filter((item) => item.id !== row.id)
				ElMessage.success('删除成功')
			})
			.catch(() => { })
	}
	// 行编辑
	const detail = ref();
	const drawerShow = ref(false);
	const editId = ref();
	const editRow = (row:any) => {
		if (row) {
			console.log(row.id, '编辑---row');
			editId.value = row.id
		} else {
			// console.log('新增');
			editId.value = ''
		}
		drawerShow.value = true;
		console.log(drawerShow.value, '编辑');
		console.log(editId.value,'editId---1');
	};
	const customTbodyRow = () => {
		return 'custom-tbody-row'
	}
	const customTheader = () => {
		return 'custom-theader'
	}
	const hideDetail = () => {
		console.log(drawerShow.value, '隐藏');
		drawerShow.value = false;
	}
	const editDetail = (i:string|number, e:Object) => {
		console.log(i,e,'编辑用户');
		hideDetail();
	}
</script>
<style scoped lang="scss">
	.app-table {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background: #000;
		padding: 80px 8px 8px;
		position: relative;

		.table-title {
			font-size: 18px;
			font-weight: bold;
			background: rgb(48, 49, 54);
			color: #fff;
			padding: 16px;
			width: calc(100% - 16px);
			position: absolute;
			top: 8px;
			left: 8px;

			::v-deep(.el-button--large) {
				padding: 12px 34px;
				font-size: 16px;
			}

			.el-button--large:hover {
				background: #006eff;
			}
		}

		.el-button:hover {
			background: none;
		}

		.app-table-body {
			flex: 1;
			display: flex;
			padding: 0 10px 16px 16px;
			flex-direction: column;
			border-radius: 0 0 4px 4px;
			border-bottom-left-radius: 0px;
			border-bottom-right-radius: 0px;
			overflow: hidden;
			overflow-y: scroll;
			background: rgb(48, 49, 54);
			box-shadow: 0 0 12px rgb(0 0 0 / 5%);
			min-height: 300px;


			.table-outer {
				position: relative;
				flex: 1;
				background: rgb(29, 29, 29);
				.el-table {

					--el-table-border-color: rgb(48, 48, 48) !important;
				}
			}

			.table-self {
				position: absolute;
				height: 100%;



				.el-button.is-text:not(.is-disabled):focus,
				.el-button.is-text:not(.is-disabled):hover {
					background-color: rgba(255, 255, 255, 0) !important;
				}
			}
		}



		.pagination {
			width: 100%;
			padding: 12px 20px;
			background: rgb(48, 49, 54);
		}
	}

	// 自定义表格样式开始
	:deep {

		.el-table--enable-row-hover .el-table__body tr:hover>td {
			background: #333 !important;
		}

		.el-scrollbar {
			background-color: rgb(29, 29, 29) !important;
		}

		.el-table__header {
			tr {
				border-bottom: 1px solid rgb(64, 64, 64);

				th {
					font-size: 15px;
					font-weight: 700;
					color: #cccccc;
					height: 64px;
					background: rgb(64, 64, 64) !important;
					border-bottom: 1px solid rgb(64, 64, 64) !important;
				}
			}
		}



		.custom-tbody-row {
			background-color: rgb(29, 29, 29);
			color: #cccccc;
			height: 62px;

			.el-table__cell {
				border-bottom: 1px solid rgb(59, 59, 59);
			}
		}

		.custom-tbody-row:nth-child(10n) {
			.el-table__cell {
				border-bottom: 0px solid rgb(66, 66, 66);
			}
		}

	}

	.custom-theader {
		background-color: #333333 !important;
		color: #cccccc;
	}

	// 自定义表格样式结束
</style>